import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import _InputBase from "@mui/material/InputBase";
import _useMediaQuery from "@mui/material/useMediaQuery";
import React, { useState, memo, useRef } from "react";
import styles from "./index.module.less";
import images from "../../assets";
import RegionModal from "../region-modal";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { matchTheme } from "../../utils";
import { useLocalStorageSetState } from "../../hooks";
import { useUpdateEffect } from "ahooks";
import { LocalKeyMap } from "../../local";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var Component = function(props) {
    var _props_maxlength = props.maxlength, maxlength = _props_maxlength === void 0 ? 15 : _props_maxlength, value = props.value, onChange = props.onChange, name = props.name;
    var _useLocalStorageSetState = _sliced_to_array(useLocalStorageSetState(), 2), localStore = _useLocalStorageSetState[0], setLocalStore = _useLocalStorageSetState[1];
    var _useState = _sliced_to_array(useState((localStore === null || localStore === void 0 ? void 0 : localStore.prevArea) || "+1"), 2), area = _useState[0], setArea = _useState[1];
    var _useState1 = _sliced_to_array(useState(false), 2), open = _useState1[0], setOpen = _useState1[1];
    var t = useTranslation().t;
    var valueRef = useRef(props.value || "");
    var isPc = _useMediaQuery("(min-width:1280px)");
    var theme = useSelector(function(state) {
        return state.app.theme;
    });
    useUpdateEffect(function() {
        onChange === null || onChange === void 0 ? void 0 : onChange(area, valueRef.current);
    }, [
        area
    ]);
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: styles.page,
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: styles.unit,
                        onClick: function() {
                            return setOpen(!open);
                        },
                        children: [
                            area,
                            /*#__PURE__*/ _jsx("img", {
                                src: matchTheme(theme, {
                                    light: require("../../assets/icons/light/down.svg"),
                                    dark: require("../../assets/icons/dark/down.svg")
                                }),
                                className: styles.down
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: styles.code,
                        children: /*#__PURE__*/ _jsx(_InputBase, {
                            placeholder: t(LocalKeyMap["components.phone.placeholder"]),
                            className: styles.input,
                            type: "tel",
                            value: value,
                            onChange: function(e) {
                                valueRef.current = e.target.value;
                                onChange && onChange(area, e.target.value);
                            },
                            name: name
                        })
                    }),
                    value && (value === null || value === void 0 ? void 0 : value.length) > 0 && /*#__PURE__*/ _jsx("div", {
                        className: styles.send,
                        onClick: function() {
                            return onChange && onChange(area, "");
                        },
                        children: /*#__PURE__*/ _jsx("img", {
                            src: images.clearIcon,
                            className: styles.close
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(RegionModal, {
                inner: isPc,
                open: open,
                onClose: function() {
                    return setOpen(false);
                },
                onClick: function(val) {
                    setArea(val);
                    setLocalStore(function(s) {
                        return {
                            prevArea: val || (s === null || s === void 0 ? void 0 : s.prevArea)
                        };
                    });
                }
            })
        ]
    });
};
var PhoneInput = /*#__PURE__*/ memo(Component);
export default PhoneInput;

 //# sourceMappingURL=index.js.map